import React from 'react';
import { MaterialIcons } from '@expo/vector-icons';
import { useCartStore } from '@/store/cartStore';
import { View, StyleSheet } from 'react-native';
import { ThemedText } from './ThemedText';

type Props = {
  color: string;
};

export function CartTabIcon({ color }: Props) {
  const totalItems = useCartStore((state) => state.getTotalItems());

  return (
    <View style={styles.container}>
      <MaterialIcons name="shopping-cart" size={24} color={color} />
      {totalItems > 0 && (
        <View style={styles.badge}>
          <ThemedText style={styles.badgeText}>{totalItems}</ThemedText>
        </View>
      )}
    </View>
  );
}

const styles = StyleSheet.create({
  container: {
    position: 'relative',
  },
  badge: {
    position: 'absolute',
    top: -6,
    right: -8,
    backgroundColor: '#ff4d4f',
    borderRadius: 10,
    minWidth: 20,
    height: 20,
    justifyContent: 'center',
    alignItems: 'center',
    paddingHorizontal: 4,
  },
  badgeText: {
    color: '#fff',
    fontSize: 12,
    fontWeight: 'bold',
  },
}); 